<div id="<?php echo $uniqid;?>" style="padding:5px">
    <table border="0" width="100%" cellspacing="1" cellpadding="5" class="formtable">
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">请选择主题：</td>
            <td>
                <select v-model="firstLevel" style="height: 300px" @change="showUpper(1)"
                        class="forminput inputstyle textbox-text validatebox-text" size="20">
                    <template v-for="(vo,index) in mainCat">
                        <option v-if="vo.id==firstLevel" selected :value="vo.id">{{vo.title}}</option>
                        <option v-else :value="vo.id">{{vo.title}}</option>
                    </template>
                </select>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <select v-model="secondLevel" style="height: 300px" @change="showUpper(2)"
                        class="forminput inputstyle textbox-text validatebox-text" size="20">
                    <template v-for="(vo,index) in mainCat" v-if="vo.id==firstLevel">
                        <template v-for="(vo1,idx1) in vo.children">
                            <option v-if="vo1.id==secondLevel" selected :value="vo1.id">{{vo1.title}}</option>
                            <option v-else :value="vo1.id">{{vo1.title}}</option>
                        </template>
                    </template>
                </select>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <select v-model="thirdLevel" style="height: 300px" @change="showUpper(3)"
                        class="forminput inputstyle textbox-text validatebox-text" size="20">
                    <template v-for="(vo,index) in mainCat" v-if="vo.id==firstLevel">
                        <template v-for="(vo1,idx1) in vo.children" v-if="vo1.id==secondLevel">
                            <template v-for="(vo2,idx2) in vo1.children">
                                <option v-if="vo2.id==thirdLevel" selected :value="vo2.id">{{vo2.title}}</option>
                                <option v-else :value="vo2.id">{{vo2.title}}</option>
                            </template>
                        </template>
                    </template>
                </select>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">所属主题：</td>
            <td><span style="padding-left: 10px;">{{upper}}</span></td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">情形名称：</td>
            <td><input type="text" style="width: 500px;"
                       class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                       placeholder="请输入情形名称.." v-model="params.title">
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">排序：</td>
            <td><input name="sortorder" type="text"
                       class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                       placeholder="请输入排序.." v-model="params.sortorder"></td>
        </tr>
    </table>
</div>
<script>
    var eventconditioneditVm = new Vue({
        el: '#<?php echo $uniqid;?>',
        data: {
            firstLevel: parseInt("<?php echo $levels[0]??0;?>"),
            secondLevel: parseInt("<?php echo $levels[1]??0;?>"),
            thirdLevel: parseInt("<?php echo $levels[2]??0;?>"),
            upper: "<?php echo $upper;?>",
            params: JSON.parse("<?php echo addslashes($dataset);?>"),
            mainCat: JSON.parse("<?php echo addslashes($mainCat);?>"),
        },
        mounted() {
            this.init();
        },
        methods: {
            init: function () {
                this.params.sortorder = this.params.sortorder ? this.params.sortorder : 500;
            },
            showUpper: function (level) {
                let upp = [];
                eventconditioneditVm.mainCat.forEach(function (item, index) {
                    if (item.id === eventconditioneditVm.firstLevel) {
                        upp.push(item.title);
                        if (eventconditioneditVm.secondLevel > 0) {
                            item.children.forEach(function (itm, index) {
                                if (itm.id === eventconditioneditVm.secondLevel) {
                                    upp.push(itm.title);
                                    if (eventconditioneditVm.thirdLevel > 0) {
                                        itm.children.forEach(function (iem, index) {
                                            if (iem.id === eventconditioneditVm.thirdLevel) {
                                                upp.push(iem.title);
                                            }
                                        });
                                    }
                                }
                            });
                        }
                    }
                });
                eventconditioneditVm.upper = upp.join(' > ');
            }
        }
    });
    $(function () {
        $('#eventcatsubmit').click(function () {
            if (eventconditioneditVm.hasAct) {
                eventconditioneditVm.params.actions = getTreeChecked('#eventcataddAct');
            }
            if (parseInt(eventconditioneditVm.secondLevel) > 0) {
                eventconditioneditVm.params.up = eventconditioneditVm.secondLevel;
            } else if (parseInt(eventconditioneditVm.firstLevel) > 0) {
                eventconditioneditVm.params.up = eventconditioneditVm.firstLevel;
            }
            let act = (eventconditioneditVm.params.id>0) ? 'edit' : 'add';
            $.post('/admin/eventcat/' + act, eventconditioneditVm.params, function (data) {
                if (data.ret === 0) {
                    $.messager.show({
                        title: '提示',
                        msg: data.msg,
                        timeout: 3000,
                        showType: 'slide'
                    });
                    if(typeof(eventcatReload)!=='undefined'){
                        eventcatReload();
                    }
                    $("#eventcatdlg").dialog('close');
                } else {
                    $.messager.alert('提示', data.msg, 'warning');
                }
            }, 'json');
        });
    });
</script>
